<!-- 商户流水 -->
<template>
  <div class="merchantRecords">
    <div class="pageHeader">
      <i class="el-icon-arrow-left" @click="goBack"></i>
      <span>商户流水</span>
    </div>

    <div class="moneyBox">
      <div class="moneyItem" v-for="item in list" :key="item.name">
        <div>￥{{ form[item.filed] }}</div>
        <p>{{ item.name }}</p>
      </div>
    </div>

    <div class="merchantRecordsBox">
      <div class="queryForm">
        <myForm :formConfig="queryFormConfig" :formData="queryFormData" :labelWidth="labelWidth">
          <!-- 操作金额 -->
          <template slot="price">
            <div class="flexDiv">
              <el-input size="mini" placeholder="最低" @blur="handleQuery"></el-input>
              <span style="margin:0 10px;">至</span>
              <el-input size="mini" placeholder="最高" @blur="handleQuery"></el-input>
            </div>
          </template>

          <template slot="btn">
            <div>
              <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
              <el-button size="mini">导出</el-button>
              <el-button type="text" size="mini" @click="reset">清空筛选</el-button>
            </div>
          </template>
        </myForm>
      </div>

      <myTable
        :tableConfig="tableConfig"
        :pagination="pagination"
        @paginationQuery="paginationQuery"
      ></myTable>
    </div>
  </div>
</template>
    
<script>
import {
  getMerchantStatics,
  getDataOprTypes,
  queryPaged
} from "@/api/merchantRecords";
export default {
  components: {},
  data() {
    return {
      list: [
        { name: "商户总入账", filed: "input" },
        { name: "商户总出账", filed: "output" },
        { name: "商户未提现金额", filed: "undo" }
      ],
      form: {
        input: 0,
        output: 0,
        undo: 0
      },
      labelWidth: "60px",
      queryFormConfig: [
        {
          label: "出/入账",
          prop: "certNo",
          type: "select",
          options: [],
          enter: this.handleQuery
        },
        {
          label: "操作类型",
          prop: "sampleName",
          type: "select",
          options: [],
          enter: this.handleQuery
        },
        {
          label: "业务编号",
          prop: "certNo",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "操作金额",
          slotName: "price"
        },
        {
          label: "操作时间",
          prop: "time",
          type: "dateRange",
          change: this.handleQuery
        },
        { label: "", slotName: "btn" }
      ],
      queryFormData: {},
      tableConfig: {
        showIndex: false,
        loading: false,
        selection: false,
        data: [],
        columns: [
          { label: "用户ID", prop: "certNo" },
          { label: "用户昵称", prop: "sampleName" },
          { label: "交易次数", prop: "factoryNumber" },
          { label: "注册时间", prop: "specifications" }
        ]
      },
      pagination: {
        page: 1,
        limit: 20,
        total: 0
      },
      id: this.$route.query.id
    };
  },
  created() {
    this.getDataOprTypes();
    this.getMerchantStatics();
  },
  methods: {
    goBack() {
      this.$router.push("/merchantManagement");
    },
    getMerchantStatics() {
      getMerchantStatics({ merchantId: this.id }).then(res => {
        this.form = res.data;
      });
    },
    getDataOprTypes() {
      getDataOprTypes().then(res => {
        this.queryFormConfig[0].options = res.data[0].map(item => ({
          description: item.name,
          dataCode: item.id
        }));

        this.queryFormConfig[1].options = res.data[0].map(item => ({
          description: item.name,
          dataCode: item.id
        }));
      });
    },
    // 查询
    handleQuery(num = 1) {
      if (num != 0) {
        this.pagination = {
          page: 1,
          limit: 20,
          total: 0
        };
      }
      this.tableConfig.loading = true;
      if (this.queryFormData.area) {
        this.queryFormData.province = this.queryFormData.area[0];
        this.queryFormData.city = this.queryFormData.area[1];
        this.queryFormData.county = this.queryFormData.area[2];
      } else {
        this.queryFormData.province = "";
        this.queryFormData.city = "";
        this.queryFormData.county = "";
      }
      queryPaged({
        ...this.queryFormData,
        pageIndex: this.pagination.page,
        pageSize: this.pagination.limit,
        sortBy: 1
      })
        .then(res => {
          const { data, flag } = res;
          this.tableConfig.loading = false;
          this.tableConfig.data = data.map(item => {
            const { province, city, county } = item;
            if (province && city && county) {
              item.area = province + "/" + city + "/" + county;
            }
            return item;
          });
          this.pagination.total = flag;
        })
        .catch(res => {
          this.tableConfig.loading = false;
        });
    },
    paginationQuery(val) {
      this.pagination.page = val.page;
      this.handleQuery(0);
    },
    // 重置
    reset() {
      this.queryFormData = {};
      this.handleQuery();
    }
  }
};
</script>
    
<style scoped lang="scss">
.merchantRecords {
  padding: 15px;

  .pageHeader {
    font-size: 18px;
    font-weight: 550;
    margin-bottom: 10px;

    i {
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .moneyBox {
    display: flex;

    .moneyItem {
      width: 212px;
      height: 120px;
      box-shadow: rgba(215, 215, 215, 0.35) 0px 3px 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 50px;

      div {
        font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
        font-weight: 700;
        font-style: normal;
        text-align: center;
        font-size: 32px;
      }

      p {
        text-align: center;
        font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 14px;
        color: #666666;
        margin-top: 10px;
      }
    }
  }

  .merchantRecordsBox {
    margin-top: 10px;

    ::v-deep .el-form-item:nth-child(5) {
      width: 28% !important;
    }
  }
}
</style>
    